<template>
  <div>
    <mt-header style="background:#2355AF;">
      <router-link to="/" slot="left">
        <mt-button icon="back">{{param.nickname}}</mt-button>
      </router-link>
      <div slot="right">
        <!-- <div class="header_right">
          <span :class="tabChoice==1?'active':''" @click="day">日</span>
          <span :class="tabChoice==2?'active':''" @click="week">周</span>
          <span :class="tabChoice==3?'active':''" @click="mon">月</span>
        </div> -->
      </div>
    </mt-header>
    <div v-if="tabChoice==1" class="content">
      <div class="mon_content" style>
        <span>{{param.account}}</span>
        <span>元（权益）</span>
      </div>
      <div class="content_top_bottom" style>
        <div class="bottom_list" style>
          <p>{{param.baozhenjin}}</p>
          <p>保证金</p>
        </div>
        <div class="bottom_list" style>
          <p>{{param.loss_account}}</p>
          <p>总亏损</p>
        </div>
        <div class="bottom_list" style>
          <p style="color:#D47423;">{{param.profit_account}}</p>
          <p>总盈利</p>
        </div>
        <div class="bottom_list" style>
          <p>{{param.fengxian}}</p>
          <p>风险值</p>
        </div>
      </div>
      <div class="content_bottom" style="margin-top:.2rem;" @click="capitalpage">
        <span>资金明细(4)</span>
      </div>
      <!-- <div class="content_bottom" style>
        <span>最佳战绩</span>
      </div>
      <div class="content_bottom" style>
        <span>历史交易(0)</span>
      </div> -->
    </div>
    <!-- <div v-if="tabChoice==2" class="content">
            <div class="mon_content" style>
        <span>+0</span>
        <span>元（盈利）</span>
      </div>
      <div class="content_top_bottom" style>
        <div class="bottom_list" style>
          <p>0</p>
          <p>成交（手）</p>
        </div>
        <div class="bottom_list" style>
          <p>0</p>
          <p>盈利（手）</p>
        </div>
        <div class="bottom_list" style>
          <p style="color:#D47423;">0%</p>
          <p>胜率</p>
        </div>
        <div class="bottom_list" style>
          <p>0%</p>
          <p>战胜</p>
        </div>
      </div>
      <div class="content_bottom" style = "margin-top:.2rem;">
        <span>当前持仓(0)</span>
      </div>
      <div class="content_bottom" style>
        <span>最佳战绩</span>
      </div>
      <div class="content_bottom" style>
        <span>历史交易(0)</span>
      </div>
    </div> -->
    <!-- <div v-if="tabChoice==3" class="content" style>
      <div class="mon_content" style>
        <span>0</span>
        <span>元（盈利）</span>
      </div>
      <div class="content_top_bottom" style>
        <div class="bottom_list" style>
          <p>0</p>
          <p>成交（手）</p>
        </div>
        <div class="bottom_list" style>
          <p>0</p>
          <p>盈利（手）</p>
        </div>
        <div class="bottom_list" style>
          <p style="color:#D47423;">0%</p>
          <p>胜率</p>
        </div>
        <div class="bottom_list" style>
          <p>0%</p>
          <p>战胜</p>
        </div>
      </div>
      <div class="content_bottom" style="margin-top:.2rem;">
        <span>当前持仓(0)</span>
      </div>
      <div class="content_bottom" style>
        <span>最佳战绩</span>
      </div>
      <div class="content_bottom" style>
        <span>历史交易(0)</span>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabChoice:1,
     param: {
        nickname: "--", //账户
        account: "0.00", //权益
        baozhenjin: "--", //保证金
        profit_account: "--", //总盈利
        loss_account: "--", //总亏损
        fengxian: "--", //风险值
        childrenMessage: "",
      }
    };
  },
  mounted(){
    this.getuser()
  },
  methods: {
    capitalpage(){
      this.$router.push({path:'capitalpage'})
    },
        getuser() {
      var that = this;
      that
        .$http({
          //调用接口
          method: "GET",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          url: that.$serverUrl + "futures_users_info"
        })
        .then(
          res => {
              that.param = res.data.data,
              that.$store.commit("setUser", that.param);
			  
          },
          function(error) {}
        );
    },
    day() {
      this.tabChoice = 1;
    },
    week() {
      this.tabChoice = 2;
    },
    mon() {
      this.tabChoice = 3;
    }
  }
};
</script>

<style scoped>
.header_right {
  border: 2px solid rgb(255, 255, 255);
  /* width: 74%; */
  width: 2.2rem;
  height: 0.6rem;
  /* text-align: center; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
}
.header_right > span {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #fff;
}
.header_right span:last-child {
  border-right: none;
}
.active {
  background: #fff;
  color: #2355af;
}
.content {
  width: 100%;
  height: 3rem;
  background: #2355af;
}
.mon_content {
  width: 100%;
  height: 1rem;
  color: #99BEFD;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding: 0.2rem 0;
}
.mon_content span:first-child {
  font-size: 0.7rem;
  color: #fff;
  padding: 0 0.1rem;
}
.content_top_bottom {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom_list {
  width: 25%;
  height: 100%;
  font-size: 0.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.bottom_list > p:last-child {
  color: #99BEFD;
}
.bottom_list p {
  padding: 0.02rem 0;
}
.content_bottom {
  width: 100%;
  height: 0.8rem;
  font-size: 0.35rem;
  color: #333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.35rem;
}
</style>
